<template>
  <el-card>
    <div style="margin-bottom: 20px; font-size: 20px;color: #606266;">模板管理</div>
    <el-tabs v-model="activeName" v-loading="loading" @tab-click="handleClick">
      <el-tab-pane label="草稿箱" name="draft">
        <el-table
          :data="draftList"
          style="width: 100%"
        >
          <el-table-column
            prop="userVersion"
            label="版本号"
          />
          <!--          <el-table-column-->
          <!--            prop="draftId"-->
          <!--            label="草稿Id"-->
          <!--            width="180">-->
          <!--          </el-table-column>-->
          <el-table-column
            prop="userDesc"
            label="描述"
          />
          <el-table-column
            prop="sourceMiniProgram"
            label="开发小程序"
          />
          <el-table-column
            prop="developer"
            label="开发者"
          />
          <el-table-column
            prop="createTime"
            align="center"
            :formatter="convertTime"
            label="提交时间"
          />
          <el-table-column
            v-if="enableAdd"
            prop="option"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handelAddTemplate(scope.row.draftId)">添加到模板库</el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="小程序模板库" name="template">
        <el-table
          :data="curList"
          style="width: 100%"
        >
          <el-table-column
            prop="userVersion"
            label="版本号"
          />

          <el-table-column
            prop="templateId"
            label="模板ID"
          />
          <el-table-column
            prop="userDesc"
            label="描述"
          />
          <el-table-column
            prop="developer"
            label="开发者"
          />
          <el-table-column
            align="center"
            prop="createTime"
            :formatter="convertTime"
            label="提交时间"
          />
          <el-table-column
            v-if="enableDel"
            prop="option"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handelDeleteTemplate(scope.row.templateId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          :current-page.sync="pageNum"
          :page-sizes="[10,20,50]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />

      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
/* eslint-disable no-console */
import dayjs from 'dayjs'
import { getTemplateDraftList, getTemplateList, addToTemplate, deleteToTemplate } from '@/api/wxapp'
import { mapGetters } from 'vuex'
export default {
  name: 'CodeTemplate',
  props: {
    msg: String
  },
  data() {
    return {
      activeName: 'draft',
      loading: false,
      draftList: [],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      templateList: [],
      curList: []
    }
  },
  computed: {
    ...mapGetters(['banBtnList']),
    enableDel() {
      return !this.banBtnList || this.banBtnList.indexOf('BTN_WX_TEMPLATE_DEL') === -1
    },
    enableAdd() {
      return !this.banBtnList || this.banBtnList.indexOf('BTN_WX_TEMPLATE_ADD') === -1
    }
  },
  mounted() {
    this.getTemplateDraftList()
  },
  methods: {
    handleCurrentChange(cur) {
      this.pageNum = cur
      const offset = (this.pageNum - 1) * this.pageSize
      this.curList = this.templateList.slice(offset, offset + this.pageSize)
    },
    handleSizeChange(cur) {
      this.pageNum = 1
      this.pageSize = cur
      const offset = (this.pageNum - 1) * this.pageSize
      this.curList = this.templateList.slice(offset, offset + this.pageSize)
    },
    addTemplate(draftId) {
      return addToTemplate(draftId).then(resp => {
        if (resp.code === 0) {
          this.$message.success('添加成功！')
        } else {
          this.$message.error('添加成功！')
        }
      })
    },
    deleteTemplate(templateId) {
      return deleteToTemplate(templateId).then(resp => {
        if (resp.code === 0) {
          this.$message.success('删除成功！')
          this.getTemplateList()
        } else {
          this.$message.error('删除成功！')
        }
      })
    },
    getTemplateDraftList() {
      getTemplateDraftList().then((resp) => {
        this.draftList = resp.data
      })
    },
    getTemplateList() {
      getTemplateList().then((resp) => {
        this.templateList = resp.data
        if (!this.templateList || this.templateList.length === 0) {
          this.curList = []
          this.total = 0
        }
        this.total = this.templateList.length
        this.handleCurrentChange(1)
      })
    },
    convertTime(row, column, cellValue, index) {
      console.info(row.createTime)
      return dayjs.unix(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    handleClick(tab) {
      if (tab.name === 'template') {
        this.getTemplateList()
      } else {
        this.getTemplateDraftList()
      }
    },
    handelAddTemplate(draftId) {
      console.log(draftId)
      this.$confirm('确定把草稿箱代码添加到代码库？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.loading = true
        this.addTemplate(draftId).then(() => {
          this.loading = false
        })
      }).catch(() => {
        this.loading = false
      })
    },

    handelDeleteTemplate(templateId) {
      this.$confirm('该操作会导致相关版本失效，确定继续？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.deleteTemplate(templateId).then(() => {
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	::v-deep .el-tabs__item.is-active{
		color: $btnBgc;
	}
	::v-deep .el-tabs__item:hover{
		color: $btnBgc;
	}
	::v-deep .el-tabs__active-bar{
		background-color: $btnBgc;
	}
	::v-deep .el-button--text{
		color: $btnBgc;
	}
</style>
